<script setup lang="ts" name="Playground">
import XtxMessage from '@/components/message/index.vue'
import { ref } from 'vue'

const isShow = ref(false)

const login = () => {
  console.log('登录成功..')
  // 提示用户
  isShow.value = true
}
</script>

<template>
  <!-- 专门用于测试不稳定的代码 -->
  <div>演练场</div>
  <!-- 
    1.出现之后需要消失
    2.出现没有动画
    3.提示竟然需要我提前在页面中写个结构, 通过数据控制结构的显示隐藏(非主流)??
      应该是在页面中没有结构, 通过调用函数的形式, 弹出一个提示(主流)
      目标: 通过调用函数的形式往页面中插入一个结构  h  render
   -->
  <button @click="login">登录</button>
  <XtxMessage v-if="isShow" type="success">登录成功</XtxMessage>
</template>

<style scoped></style>
